<!-- 提现记录 -->
<template>
	<view class="header-info">
		<view class="note">当前可提现金额</view>
		<view class="amount">¥{{ userStore.userInfo.current_money || 0 }}</view>
	</view>
  <view class="withdraw-wrapper">
		<view class="empty-date" v-if="Object.keys(list) == false">{{ end_month.replace(/-/g, '年') + '月' }}</view>
		<view class="withdraw-item" v-for="(value, key) in list" :key="key">
			<view class="date-time">{{ key}}</view>
			<view class="info" v-for="(item, j) in value">
				<view class="middle-part">
					<view class="title">收益提现-到银行卡账户（{{ item.bank_no.slice(item.bank_no.length-4, item.bank_no.length) }}）</view>
					<view class="money">¥{{ item.real_money }}</view>
				</view>
				<view class="time">{{ item.created_at.slice(item.created_at.indexOf('-')+1, item.created_at.length) }}</view>
			</view>
		</view>
		
		<view class="choose-date-wrapper">
			<view v-if="!isChooseDate">
				<text>仅展示12个月的交易数据，查看更多请</text>
				<text class="choose-date" @click="$popupChange(this, 'dataPicker', 'open')">选择时间</text>
			</view>
			<view v-else>
				<text>{{ Object.keys(list) == false ? '无相关记录，' : '' }}查看更多请</text>
				<text class="choose-date" @click="$popupChange(this, 'dataPicker', 'open')">选择时间</text>
			</view>
		</view>
  </view>
	
	<uni-popup type="bottom" ref="dataPicker" :is-mask-click="false" :safe-area="false">
		<data-picker mode="date" :disabled-over-date="true" @cancel="$popupChange(this, 'dataPicker')" @confirm="dateChange"></data-picker>
	</uni-popup>
</template>

<script>
import { dateFormatModify } from '../../../common/utils'
import { useUserStore } from '../../../store/userStore'

export default {
  data() {
    return {
			userStore: useUserStore(),
			start_month: '',
			end_month: '',
			list: {},
			isChooseDate: false,
    }
  },
	onLoad() {
		const lastYear = new Date().getFullYear() - 1,
			currrentMonth = new Date().getMonth() + 1
		this.start_month = `${lastYear}-${String(currrentMonth).padStart(2, '0')}`
		this.end_month = this.initDate()
		this.getWithdrawRecord()
	},
  methods: {
		async getWithdrawRecord() {
			const res = await this.$request.get('/api/money/cash_lists', {
				start_month: this.start_month,
				end_month: this.end_month
			})
			if (res.code == 200) {
				let data_list = []
				const list = res.data?.lists || []
				this.list = this.groupByMonth(list, 'created_at')
			}
		},
		dateChange(data) {
			this.isChooseDate = true
			const date_time = dateFormatModify(data.val)
			const date = new Date(date_time)
			let year = date.getFullYear()
			let month = date.getMonth()
			if (month == 0) {
				year = year - 1
				month = 12
			}
			this.end_month = data.val
			this.start_month = `${year}-${String(month).padStart(2, '0')}`;
			this.$refs.dataPicker.close()
			
			this.getWithdrawRecord()
		},
		// 初始化日期，设置为当天时间
		initDate(showDay = false) {
		  let t = ''
		  const date = new Date()
		  const year = date.getFullYear(),
		    month = date.getMonth() + 1,
		    day = date.getDate()
		  const m = month < 10 ? ('0' + month) : month,
		    d = day < 10 ? ('0' + day) : day
		  
		  if (showDay) {
		    t = `${year}-${m}-${d}`
		  } else {
		    t = `${year}-${m}`
		  }
		  return t
		},
		// 按月份分类
		groupByMonth(data, date_text = 'time') {
			const { osName } = uni.getDeviceInfo()
		  return data.reduce((acc, item) => {
				let date_time = dateFormatModify(item[date_text])
		    const date = new Date(date_time);
		    const year = date.getFullYear();
		    const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份补零
		    const key = `${year}年${month}月`;
		    if (!acc[key]) acc[key] = [];
		    acc[key].push(item);
		    return acc;
		  }, {});
		}
  },
}
</script>

<style scoped lang="scss">
	.header-info {
		padding: 0 30rpx;
		height: 200rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		
		.note {
			font-size: 30rpx;
			margin-bottom: 8rpx;
		}
		.amount {
			font-size: 48rpx;
			font-weight: 500;
		}
	}
	.withdraw-wrapper {
		padding: 0 30rpx;
		background-color: #fff;
		border-radius: 30rpx 30rpx 0 0;
		min-height: calc(100vh - 200rpx);
		
		.empty-date {
			padding: 30rpx 0;
			font-size: 40rpx;
			font-weight: 500;
		}
		.withdraw-item {
			padding: 32rpx 0;
			border-bottom: 1px solid #e9e9e9;
			.date-time {
				font-size: 40rpx;
				font-weight: 500;
			}
			.info {
				padding-top: 28rpx;
				.middle-part {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 8rpx;
					.title {
						font-size: 28rpx;
					}
					.money {
						font-size: 36rpx;
						font-weight: 500;
					}
				}
				.time {
					font-size: 26rpx;
					color: #7B7B7B;
				}
			}
		}
		
		.choose-date-wrapper {
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 26rpx;
			margin-top: 80rpx;
			
			.choose-date {
				color: $uni-color-primary;
				text-decoration: underline;
			}
		}
	}
</style>